<template>
  <div class="discovery">
<!--    轮播图-->
    <el-carousel :interval="4000" type="card" height="200px" class="lbt">
      <el-carousel-item v-for="(item,index) in banners" :key="index" class="lbt-box">
        <img :src="item.imageUrl" alt="">-->
      </el-carousel-item>
    </el-carousel>

<!--    推荐歌单-->
    <div class="recommend">
        <h3>推荐歌单</h3>

      <div class="item" v-for="(item,index) in list" :key="index" @click="toPlaylist(item.id)">
        <div class="img-wrap">
          <div class="desc-wrap">
            <span class="desc">{{item.copywriter}}</span>
<!--            <span class="play"><img src="../assets/images/play.png" alt=""></span>-->
          </div>
          <img :src="item.picUrl" alt="">
        </div>
        <p class="name">{{item.name}}</p>
      </div>
    </div>

<!--    最新音乐-->
<h3 class="newsong-h3">最新音乐</h3>
    <div class="newsong">
      <div class="item" v-for="(item,index) in songs" :key="index">
        <div class="img-wrap">
          <img :src="item.picUrl" alt="" >
          <span @click="aaaa(item.id,index)" ><img src="../assets/images/play.png" alt=""></span>
        </div>
        <div class="song-wrap">
          <div class="song-name"> {{item.name}} </div>
          <div class="singer">{{item.song.artists[0].name}}</div>
      </div>
    </div>
    </div>

<!--    推荐mv-->
    <div class="mvs">
      <h3 class="title">推荐MV</h3>
      <div class="items">
        <div class="item" v-for="(item,index) in mvs" :key="index" @click="playmv">
          <div class="img-wrap">
            <span><img src="../assets/images/play.png" alt=""></span>
            <img :src="item.picUrl" alt="">
            <div class="num-wrap">
              <div></div>
              <div class="num">{{item.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name"> {{item.name}} </div>
            <div class="singer"> {{item.artistName}} </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "discovery",
  data(){
    return{
      banners:[],
      list:[],
      songs:[],
      mvs:[]
    }
  },
  created() {
    axios({
      url:'https://autumnfish.cn/banner',
      method:'get',
    }).then(res=>{
      // console.log(res)
      this.banners = res.data.banners
    })

    axios({
      url: 'https://autumnfish.cn/personalized',
      method: 'get',
      params:{
        limit:10
      }
    }).then(res=>{
      // console.log(res)
      this.list = res.data.result
    })

    axios({
      url: 'https://autumnfish.cn/personalized/newsong',
      mathod:'get'
    }).then(res=>{
      this.songs = res.data.result
      // console.log(res)
    })

    axios({
      url: 'https://autumnfish.cn/personalized/mv',
      method: 'get'
    }).then(res=>{
      // console.log(res)
      this.mvs = res.data.result
    })
  },
  methods:{
    playmv(){
      alert('暂不支持播放mv~')
    },
    aaaa(id){
      console.log(id)
      axios({
        url:'https://autumnfish.cn/song/url',
        method:'get',
        params:{
          id
        }
      }).then(res=>{
        // console.log(res)
        let url = res.data.data[0].url
        // console.log(this.$parent.musicUrl)
        this.$parent.musicUrl = url
      })
    },
    toPlaylist(id){
      this.$router.push(`/playlist?id=${id}`)
    }
  }
}
</script>

<style scoped>
.discovery{
  width: 100%;
}

.lbt{
  margin-top: 20px;
  height: auto;
}

.lbt-box{
  border-radius: 10px;
  overflow: hidden;
}

.lbt img{
  width: 100%;
  height: 100%;
}

/*t推荐歌单*/
.recommend{
  /*margin-top: 20px;*/
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20px auto;
}
.recommend h3{
  width: 100%;
  height: 50px;
  /*background: #ffa22d;*/
}
.recommend .item{
  width: 19%;
  margin-bottom: 30px;
}
.recommend .img-wrap{
  width: auto;
  height: auto;

}
.recommend .img-wrap img{
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}
.recommend .desc-wrap span{
  position: absolute;
  display: block;
  width: 19%;
  height: 30px;
  color: #ffffff;
  border-radius: 5px;
}
.recommend .item .name{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recommend .img-wrap .desc-wrap .play img{
  height: 40px;
  width: 40px;
  position: absolute;
  right: 3px;
  top: 186px;
  cursor: pointer;
}

/*最新新歌*/
.newsong-h3{
  margin-top: 30px;
}
.newsong{
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.newsong .item{
  width: 50%;
  height: 100px;
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.newsong .item:hover{
  background-color: rgba(0,0,0,.04);
}

.newsong .item .img-wrap{
  width: 80px;
  height: 80px;
  position: relative;
}
.newsong .item .img-wrap img{
  width: 100%;
  height: 100%;
}

.newsong .item .img-wrap span img{
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 5;
  cursor: pointer;
}

.newsong .song-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
}

.newsong .song-wrap .singer{
  font-size: 15px;
  color: #666666;
}

/*mv*/
.mvs{
  width: 100%;
  position: relative;
  bottom: -470px;
  padding-bottom: 80px;
  /*background-color: #ffa22d;*/
}
.mvs h3{
  margin-bottom: 20px;
}
.mvs .items{
  display: flex;
  justify-content: space-around;
  /*background: #ffa22d;*/
}
.mvs .items .item{
  width: 24%;
  height: 100%;
}
.mvs .items .item .img-wrap{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}
.mvs .items .item .img-wrap img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.mvs .items .item .img-wrap span img{
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.mvs .items .item .img-wrap .num{
  position: absolute;
  right: 5px;
  top: 2px;
  color: #ffffff;
}
.mvs .items .item .info-wrap .name{
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mvs .items .item .info-wrap .singer{
  color: #c6c6c6;
  font-size: 13px;
}
</style>